import { Form, Button, Space } from 'antd'
import { FC, useState, memo, useEffect, useMemo } from 'react'
import { getDataSheetAttributes, getDataSheetPlanningDimension, getDataMaintenanceMode } from '@/utils/demoType'
import { HsAdminSelectUsers } from '@/components/global'
import { HsAdminForm } from '@hs-admin/base-components'
import { useImmer } from 'use-immer'
import { getAllUserList } from '@/api/common'

const FormPage: FC = () => {
  const [form] = Form.useForm()
  const [formValues, setformValues] = useImmer<any>({})
  const [userOptions, setuserOptions] = useState<any[]>([])
  const [userList, setUserList] = useImmer<any[]>([])

  const formItemOptions = useMemo(
    () => [
      {
        label: '表名',
        name: ['first', 'en_table_name'],
        component: 'Input',
        required: true,
        FormItemColProps: {
          span: 12
        }
      },
      {
        label: '中文名',
        name: 'cn_table_name',
        component: 'TextArea',
        required: true,
        FormItemColProps: {
          span: 12
        }
      },
      {
        label: '负责人',
        name: 'production_lead_id',
        component: 'Select',
        required: true,
        componentProps: {
          options: userList
        },
        FormItemColProps: {
          span: 12
        }
      },
      {
        label: '表类型',
        name: 'table_type',
        component: 'Select',
        required: true,
        componentProps: {
          options: getDataSheetAttributes().slice(1)
        },
        FormItemColProps: {
          span: 12
        }
      },
      {
        label: '规划负责人',
        name: 'plan_lead_id',
        required: true,
        slot: 'plan_lead_id',
        FormItemColProps: {
          span: 12
        }
      },
      {
        label: '预计数据量',
        name: 'expected_data_volume',
        component: 'InputNumber',
        FormItemColProps: {
          span: 12
        }
      },
      {
        label: '维护方式',
        name: 'maintenance_method',
        component: 'Select',
        required: true,
        componentProps: {
          options: getDataMaintenanceMode(),
          multiple: true
        },
        FormItemColProps: {
          span: 12
        }
      },
      {
        label: '规划维度',
        name: 'planning_dimension',
        component: 'Select',
        required: true,
        componentProps: {
          options: getDataSheetPlanningDimension()
        },
        FormItemColProps: {
          span: 12
        }
      },
      {
        label: '',
        name: 'submit',
        slot: 'submit',
        FormItemColProps: {
          span: 24
        },
        FormItemProps: {
          labelCol: { span: 6 },
          wrapperCol: { offset: 16 }
        }
      }
    ],
    [userList]
  )

  const onReset = () => {
    form.resetFields()
  }
  const onFill = () => {
    form.setFieldsValue(formValues)
    setuserOptions([
      {
        label: formValues.plan_lead,
        value: formValues.plan_lead_id
      }
    ])
  }

  useEffect(() => {
    getAllUserList({
      page: 1,
      page_size: 100
    }).then((res) => {
      setUserList(res)
    })
    setformValues({
      cn_table_name: '测试表1',
      first: {
        en_table_name: 'yhtest1'
      },
      planning_dimension: 'based_on_region',
      table_type: 'other',
      maintenance_method: ['program'],
      plan_lead: '测试1',
      production_lead: '章振南',
      plan_lead_id: 'f28b68fd-ecd7-48d0-8c39-09b74f551994',
      production_lead_id: 'a03efbb2-f89c-4798-ba7c-5a91aaf6e418',
      expected_data_volume: 12
    })
  }, [setUserList, setformValues])

  return (
    <HsAdminForm formItemOptions={formItemOptions} form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
      <div slot="plan_lead_id">
        <HsAdminSelectUsers placeholder="请选择规划负责人" options={userOptions}></HsAdminSelectUsers>
      </div>
      <div slot="submit">
        <Space>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
          <Button type="link" htmlType="button" onClick={onFill}>
            填充表单
          </Button>
        </Space>
      </div>
    </HsAdminForm>
  )
}

export default memo(FormPage)
